<template>
  <div style="display: inline-block">
    <el-button
        class="add-btn"
        size="mini"
        type="primary"
        icon="el-icon-plus"
        v-show="addBtn"
        @click="add"
    >
      新增
    </el-button>
    <el-button
        class="filter-item"
        type="danger"
        icon="el-icon-delete"
        size="mini"
        :loading="loading"
        :disabled="disabled"
        v-show="delBtn"
        @click="remove"
    >
      批量删除
    </el-button>
    <el-button
        class="add-btn"
        size="mini"
        type="primary"
        icon="el-icon-s-data"
        v-show="authorityBtn"
        :disabled="clickShow"
        @click="authority"
    >
      权限归属
    </el-button>
  </div>
</template>

<script>
export default {
  name: 'addPage',
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: true,
    },
    addBtn: {
      type: Boolean,
      default: true,
    },
    delBtn: {
      type: Boolean,
      default: true,
    },
    authorityBtn: {
      type: Boolean,
      default: false,
    },
    clickShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {}
  },
  methods: {
    add() {
      this.$emit('add');
    },
    remove() {
      this.$emit('remove');
    },
    authority() {
      this.$emit('authority');
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.add-btn {
  margin-bottom: 10px;
}
</style>